<template>
  <van-field
    v-model="fieldValue"
    :input-align="inputAlign"
    :is-link="!readonly"
    :label-align="labelAlign"
    :placeholder="readonly ? '' : '请选择所在地区'"
    :required="required"
    :rules="rules"
    label="地区"
    readonly
    @click="!readonly && (show = true)"
  />
  <van-popup v-model:show="show" :lazy-render="false" position="bottom" round>
    <van-area
      ref="areaRef"
      v-model="value"
      :area-list="areaList"
      title="请选择地区"
      @cancel="show = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useAreaStore } from '@/framework/components/AreaSelect/store'
import { isNotEmpty } from '@/framework/utils/common'

const areaRef = ref()
const props = withDefaults(
  defineProps<{
    province?: string
    city?: string
    county?: string
    required?: boolean
    readonly?: boolean
    areaDisplay?: any
    wrapLength?: number
    inputAlign?: string
  }>(),
  {
    province: '',
    city: '',
    county: '',
    required: true,
    readonly: false,
    areaDisplay: [],
    wrapLength: 15,
    inputAlign: 'left'
  }
)
const rules = ref(props.required ? [{ required: true, message: '请选择地区信息' }] : [])
const { province, city, county, required, areaDisplay, wrapLength } = toRefs(props)
const areaStore = useAreaStore()
const areaList = areaStore.getAreaList
const emit = defineEmits<{
  (e: 'update:province', province: string): void
  (e: 'update:city', city: string): void
  (e: 'update:county', county: string): void
  (e: 'confirm', province: string, city: string, county: string): void
}>()

const show = ref(false)
const value = ref(county.value)
const fieldValue = ref(areaDisplay.value.join('/'))
const labelAlign = ref('left')
watch(
  () => areaDisplay.value,
  () => {
    fieldValue.value = areaDisplay.value.join('/')
    if (isNotEmpty(areaDisplay.value)) {
      const areaCode = areaStore.getAreaCode(areaDisplay.value[0], areaDisplay.value[1], areaDisplay.value[2])
      if (isNotEmpty(areaCode.province)) {
        value.value = areaCode.province
      }
      if (isNotEmpty(areaCode.city)) {
        value.value = areaCode.city
      }
      if (isNotEmpty(areaCode.county)) {
        value.value = areaCode.county
      }
      nextTick(() => {
        showAreaField(areaRef.value.getSelectedOptions())
      })
    }
  },
  {
    immediate: true
  }
)
watch(
  () => [province.value, city.value, county.value],
  () => {
    if (isNotEmpty(province.value)) {
      value.value = province.value
    }
    if (isNotEmpty(city.value)) {
      value.value = city.value
    }
    if (isNotEmpty(county.value)) {
      value.value = county.value
    }
    nextTick(() => {
      showAreaField(areaRef.value.getSelectedOptions())
    })
  },
  {
    immediate: true
  }
)
watch(
  () => fieldValue.value,
  () => {
    if (fieldValue.value.length > wrapLength.value) {
      labelAlign.value = 'top'
    }
  },
  {
    immediate: true
  }
)
onMounted(() => {})
const onConfirm = ({ selectedOptions }: any) => {
  showAreaField(selectedOptions)
  show.value = false
}
const showAreaField = (selectedOptions: Array<any>) => {
  const optionTextArray: Array<any> = []
  const optionValueArray: Array<any> = []
  selectedOptions.forEach((option: any) => {
    optionTextArray.push(option.text)
    optionValueArray.push(option.value)
  })
  fieldValue.value = optionTextArray.join('/')
  onChange(optionValueArray)
}
const onChange = (optionValueArray: Array<any>) => {
  emit('update:province', optionValueArray[0])
  emit('update:city', optionValueArray[1])
  emit('update:county', optionValueArray[2])
}
</script>

<style lang="less" scoped></style>
